<template>
	<view class="zh-action-sheet">
		<u-mask :show="props.show" @click="handleClickMask"></u-mask>
		<scroll-view scroll-y="true" class="content" :class="{'active':props.show}">
			<view class="list">
				<view class="item" v-for="(item,index) in props.list" :key="index" @click="change(item)">
					<Text>{{ item.text }}</Text>
				</view>
			</view>
			<view class="cancel" @click="handleClickMask">
				<Text>取消</Text>
			</view>
		</scroll-view>
	</view>
</template>

<script setup lang="ts">
	const props = defineProps<{
		show?: boolean
		list: Array<{
			text?: string
			value?:string
		}>
	}>()
	
	const emit = defineEmits(['close','change'])
	
	const handleClickMask = () => {
		emit('close')
	}
	
	const change = (data:string) => {
		emit('change', data)
	}
</script>

<style lang="scss">
.zh-action-sheet {
	.content {
		position: fixed;
		bottom:0;
		left:0;
		right:0;
		z-index:2;
		max-height:0;
		&.active {
			max-height: 800rpx;
			transition: all .6s ease-out;
		}
		.list {
			.item {
				width:100%;
				padding: 30rpx 0;
				font-size: 30rpx;
				color:$uni-color-primary;
				text-align: center;
				background-color: $uni-bg-card-color;
			}
		}
		.cancel {
			width: 100%;
			padding:38rpx 0;
			text-align: center;
			font-size:30rpx;
			margin-top:10rpx;
			color: $uni-text-color-grey;
			background-color: $uni-bg-card-color;
		}
	}
	
}
</style>
